<template>
  <div style="margin:0;padding: 0">
    <el-page-header @back="goBack">
    </el-page-header>
    <div class="body" data-v-6419cdbc style="height:1500px;width: 100%;">
      <div style="margin:0;padding:0;width: 100%;height: 22%;">
        <div style="width: 100%;height:100%;background-color: rgba(0.7,0.7,0.7,0.7)">
          <div style="margin-left: 5%; width: 100%; background-color: rgba(0,0,0,0.0);">
            <div style="position: absolute; width: 100%; ">
              <div style="margin-top: 5%;">
                                <span style="color: #fff;
                                    font-size: 80px;
                                    font-weight: 700;
                                    margin-top: 90%;
                                    font-family: 华光行草_CNKI;">
                                    {{ content.name }}
                                </span>
              </div>
              <div style="margin-top:10px;">
                                <span style="color: #fff;
                                    font-size: 30px;
                                    font-weight: 150;
                                    margin-top: 90%;
                                    font-family: 华光行草_CNKI;">
                                    {{ content.other_name }}
                                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="display:flex;height: 88%;width: 100%;">
        <div class="left" data-v-2740234c data-v132304c3 style="width:60%;height:100%;margin-right: 20px;">
          <section class="long-time" data-v-2740234c style="margin-bottom:50px;">
            <div class="one-title" data-v-2740234c><h2 data-v-2740234c>养生功效</h2></div>
            <div data-v-2740234c>
              <div class="field-content" data-v-2740234c><p>{{ content.effect }}</p></div>
            </div>
          </section>
          <section class="long-time" data-v-2740234c style="margin-bottom:50px;">
            <div class="one-title" data-v-2740234c><h2 data-v-2740234c>营养与功效</h2></div>
            <div class="field-content" data-v-2740234c><p>{{ content.nutrition }}</p></div>
          </section>
          <section class="long-time" data-v-2740234c style="margin-bottom:50px;">
            <div class="one-title" data-v-2740234c><h2 data-v-2740234c>料理</h2></div>
            <div class="field-content" data-v-2740234c><p>{{ content.cook }}</p></div>
          </section>
          <section class="long-time" data-v-2740234c style="margin-bottom:50px;">
            <div class="one-title" data-v-2740234c><h2 data-v-2740234c>食验疗方</h2></div>
            <div class="field-content" data-v-2740234c><p>{{ content.prescription }}</p></div>
          </section>
          <section class="long-time" data-v-2740234c style="margin-bottom:50px;">
            <div class="one-title" data-v-2740234c><h2 data-v-2740234c>养生保健食谱</h2></div>
            <div class="field-content" data-v-2740234c><p>{{ content.recipe }}</p></div>
          </section>
          <section class="long-time" data-v-2740234c style="margin-bottom:50px;">
            <div class="one-title" data-v-2740234c><h2 data-v-2740234c>专家提醒</h2></div>
            <div class="field-content" data-v-2740234c><p>{{ content.remind }}</p></div>
          </section>
          <section class="long-time" data-v-2740234c style="margin-bottom:50px;">
            <div class="one-title" data-v-2740234c><h2 data-v-2740234c>贮藏方法</h2></div>
            <div class="field-content" data-v-2740234c><p>{{ content.stored }}</p></div>
          </section>

        </div>
        <div class="right" style="float: right;width:40%;height: 100%;margin-left: 30px;">
          <el-card class="box-card">
            <KnowledgeGraph :knowledge="knowledge" :speciality="speciality" v-if="isGetData"></KnowledgeGraph>
          </el-card>
          <!--          <div style="width:100%;float:right;height:40%;background-color: black;margin-bottom: 30px;">-->
          <!--            <span style="color:#fff">相关推荐</span>-->
          <!--          </div>-->
        </div>
      </div>

    </div>
    <Footer></Footer>
  </div>


</template>
<script>
import Footer from "@/components/Footer";
import {getDetail} from "@/api/index/function";
import KnowledgeGraph from "@/pages/Drug_Search/components/KnowledgeGraph";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "SearchResult",
  components: {
    Footer,
    KnowledgeGraph
  },
  data() {
    return {
      herbname: '',
      content: {},
      knowledge: [],//貌似是以数组形式返回的
      speciality: [],
      isGetData: false
    }
  },
  created() {
    this.herbname = this.$route.query.name;
    this.getdetail()
  },
  mounted() {

  },
  methods: {

    end() {
      this.$router.back({path: "/search"})
    },
    goBack() {
      this.$router.go(-1);
    },
    getdetail() {
      getDetail(this.herbname).then(res => {
        this.knowledge = JSON.parse(res.data.graph)
        this.speciality = JSON.parse(res.data.prop)
        this.isGetData = true
        for (var obj in res.data.food[0]) {
          if (res.data.food[0][obj] === "nan")
            res.data.food[0][obj] = "无"
        }
        this.content = res.data.food[0]
        console.log(this.content)
      })
    }
  }
}
</script>
<style scoped>
.box-card {
  width: 650px;
  margin-left: 80px;
}


.one-title h2[data-v-2740234c] {
  color: #333;
  font-size: 20px;
  line-height: 24px;
  height: 24px;
  border-left: 10px solid #1a79ff;
  padding-left: 19px;
  margin-bottom: 1px;
}

.two-title[data-v-2740234c] {
  display: inline-block;
  color: #2d2d2d;
  font-size: 18px;
  font-weight: 700;
  text-indent: 29px;
  margin: 20px 0 12px;
  display: flex;
}

.bigDiv[data-v-60dea19a] {
  position: relative;
}

.short-tag[data-v-60dea19a] {
  width: 410px;
  background: #f6faff;
  border: 1px solid #c5daf7;
  border-radius: 4px;
  z-index: 1111;
  margin-top: 32px;
  position: absolute;
  top: 0;
}

.short-tag p[data-v-60dea19a] {
  font-size: 14px;
  color: #2d2d2d;
  font-family: Microsoft YaHei;
  font-weight: 400;
  padding: 16px 16px 16px 22px;
}

.short-tag .nav-border[data-v-60dea19a] {
  top: -20px;
  border-color: transparent transparent #c5daf7;
}

.short-tag .nav[data-v-60dea19a] {
  position: absolute;
  left: 30px;
  overflow: hidden;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid dashed dashed;
}

.field-content[data-v-2740234c] {
  color: #333;
  font-size: 16px;
  line-height: 28px;
  padding-left: 28px;
  text-align: justify;
}
</style>
